<template>
	<div class="monitoringContent">
		<Header @closeLightwarning="closeLightwarning"></Header>
		<div class="middleContent">
			<div class="treeContent">
				<TreeList2
					v-if="isShow"
					:list="treeData"
					:cocnfig="defaultPropsData"
					:listType="listType"
					:isRightClick="isRightClick"
					:handleNode="treeListNodeClick"
					:handleNodeDelete="treeListNodeDelete"
					:handleNodeAdd="treeListNodeAdd"
					:handleNodeEdit="treeListNodeEdit"
				></TreeList2>
			</div>
			<div class="mainContent mainContentMap" v-show="initBool">
				<div class="mapbg">
					<div
						@click="mapBoardClick(item)"
						v-for="(item, index) in InitMapBoard"
						:key="index"
            v-show="!(item.coordY === item.coordX && item.coordX === null)"
					>
            <div style="position: relative; display: inline-block; text-align: center;">
              <span :style="{
                color: 'red',
                fontSize: 'small',
                position: 'absolute',
                top: item.coordY - 20 + 'px',
                left: item.coordX + 'px',
                whiteSpace: 'nowrap',
          }">{{ item.internalNumber }}</span>
              <i v-html="iconSvg" :style="{position: 'absolute',top: item.coordY + 'px',left: item.coordX + 'px'}"></i>
            </div>
					</div>
				</div>
			</div>
			<div class="mainContent" v-show="!initBool">
				<div class="mainContentScroll">
					<div class="backMap">
						<el-button type="primary" icon="el-icon-s-home" @click="backMapClick">回到地图</el-button>
					</div>
					<div class="b_title">{{ this.dataInfo.title }}</div>
					<div class="b_info">
						<div class="b_baseInfo">
							<el-descriptions title="情报板基本信息" :column="2" border>
								<el-descriptions-item label="情报板名称">{{ this.dataInfo.terminal.name }}</el-descriptions-item>
								<el-descriptions-item label="情报板公桩号">{{ this.dataInfo.terminal.internalNumber }}</el-descriptions-item>
								<el-descriptions-item label="情报板类型">{{ this.dataInfo.vmbType.vmbTypeName }}</el-descriptions-item>
								<el-descriptions-item label="情报板方向">{{ this.dataInfo.terminal.direction }}</el-descriptions-item>
								<el-descriptions-item label="情报板编号">{{ this.dataInfo.terminal.vmbNumber }}</el-descriptions-item>
								<el-descriptions-item label="所属机构">{{ this.dataInfo.terminal.organization }}</el-descriptions-item>
								<el-descriptions-item label="控制器IP地址">{{ this.dataInfo.terminal.clientIP }}</el-descriptions-item>
								<el-descriptions-item label="控制器网关IP">{{ this.dataInfo.terminal.clientGateway }}</el-descriptions-item>
								<el-descriptions-item label="前置装置SN号">{{ this.dataInfo.terminal.uuid }}</el-descriptions-item>
								<el-descriptions-item label="前置装置物联卡ICCID">{{ this.dataInfo.terminal.clientPhoneNumber }}</el-descriptions-item>
							</el-descriptions>
						</div>
						<div class="b_state">
							<el-descriptions title="状态信息" :column="2" border>
								<el-descriptions-item
									:contentStyle="this.dataInfo.terminal.doorStatus == '门已关' ? { color: '#409eff' } : { color: '#CD3038' }"
								>
									<template slot="label"> 箱门状态 <i class="el-icon-view viewClass" @click="handleView(0)"></i> </template>
									{{ this.terminalState != 1 ? this.dataInfo.terminal.doorStatus : "--" }}
								</el-descriptions-item>
								<el-descriptions-item :contentStyle="this.dataInfo.terminal.powerStatus == 0 ? { color: '#409eff' } : { color: '#CD3038' }">
									<template slot="label"> 箱体电源状态 <i class="el-icon-view viewClass" @click="handleView(1)"></i> </template>
									{{ this.terminalState != 1 ? (this.dataInfo.terminal.powerStatus == 0 ? "正常" : "异常") : "--" }}
								</el-descriptions-item>
								<el-descriptions-item
									:contentStyle="
										this.dataInfo.terminal.temptureStatus != null &&
										this.dataInfo.terminal.temptureStatus != '' &&
										this.dataInfo.terminal.temptureStatus.indexOf('正常') != -1
											? { color: '#409eff' }
											: { color: '#CD3038' }
									"
								>
									<template slot="label"> 箱体温度 <i class="el-icon-view viewClass" @click="handleView(2)"></i> </template>
									{{ this.terminalState != 1 ? this.dataInfo.terminal.tempture + "°C" : "--" }}
								</el-descriptions-item>
								<el-descriptions-item
									:contentStyle="
										this.dataInfo.terminal.rhStatus != null &&
										this.dataInfo.terminal.rhStatus != '' &&
										this.dataInfo.terminal.rhStatus.indexOf('正常') != -1
											? { color: '#409eff' }
											: { color: '#CD3038' }
									"
								>
									<template slot="label"> 箱体湿度 <i class="el-icon-view viewClass" @click="handleView(3)"></i> </template>
									{{ this.terminalState != 1 ? this.dataInfo.terminal.rh + "%RH" : "--" }}
								</el-descriptions-item>
								<el-descriptions-item :contentStyle="this.dataInfo.terminal.netWorkDown == 0 ? { color: '#409eff' } : { color: '#CD3038' }">
									<template slot="label"> 控制器状态 <i class="el-icon-view viewClass" @click="handleView(4)"></i> </template>
									{{ this.terminalState != 1 ? (this.dataInfo.terminal.netWorkDown == 0 ? "正常" : "异常") : "--" }}
								</el-descriptions-item>
								<el-descriptions-item :contentStyle="this.dataInfo.terminal.netWorkUp == 0 ? { color: '#409eff' } : { color: '#CD3038' }">
									<template slot="label"> 上联网络状态 <i class="el-icon-view viewClass" @click="handleView(5)"></i> </template>
									{{ this.terminalState != 1 ? (this.dataInfo.terminal.netWorkUp == 0 ? "正常" : "异常") : "--" }}
								</el-descriptions-item>
								<el-descriptions-item :contentStyle="this.dataInfo.terminal.status == 0 || this.dataInfo.terminal.status === 2 ? { color: '#409eff' } : { color: '#CD3038' }">
									<template slot="label"> 前置装置状态 <i class="el-icon-view viewClass" @click="handleView(6)"></i> </template>
									{{ this.terminalState != 1 ? (this.dataInfo.terminal.status == 0 || this.dataInfo.terminal.status === 2 ? "正常" : "异常") : "--" }}
								</el-descriptions-item>
								<el-descriptions-item
									:contentStyle="
										this.dataInfo.terminal.cpuTempStatus != null &&
										this.dataInfo.terminal.cpuTempStatus != '' &&
										this.dataInfo.terminal.cpuTempStatus.indexOf('正常') != -1
											? { color: '#409eff' }
											: { color: '#CD3038' }
									"
								>
									<template slot="label"> 前置装置运行温度 <i class="el-icon-view viewClass" @click="handleView(7)"></i> </template>
									{{ this.terminalState != 1 ? this.dataInfo.terminal.cpuTempture : "--" }}
								</el-descriptions-item>
								<el-descriptions-item :contentStyle="this.dataInfo.terminal.vpnStatus == 0 ? { color: '#409eff' } : { color: '#CD3038' }">
									<template slot="label"> VPN链路状态 <i class="el-icon-view viewClass" @click="handleView(8)"></i> </template>
									{{ this.terminalState != 1 ? (this.dataInfo.terminal.vpnStatus == 0 ? "正常" : "异常") : "--" }}
								</el-descriptions-item>
								<el-descriptions-item :contentStyle="this.dataInfo.terminal.simStatus == 0 ? { color: '#409eff' } : { color: '#CD3038' }">
									<template slot="label"> SIM卡状态 <i class="el-icon-view viewClass" @click="handleView(13)"></i> </template>
									{{ this.terminalState != 1 ? (this.dataInfo.terminal.simStatus == 0 ? "正常" : "异常") : "--" }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template slot="label"> 智能电源电压 <i class="el-icon-view viewClass" @click="handleView(11)"></i> </template>
									{{
										this.terminalState != 1
											? this.dataInfo.terminal.voltage != -1 && this.dataInfo.terminal.voltage != null
												? this.dataInfo.terminal.voltage + "V"
												: "--"
											: "--"
									}}
								</el-descriptions-item>
								<el-descriptions-item>
									<template slot="label">
										智能电源开关状态
										<!-- <i class="el-icon-view viewClass" @click="handleView(12)"></i>  -->
									</template>
									{{
										this.terminalState != 1
											? this.dataInfo.terminal.smartPowerStatus == 0
												? "关闭"
												: this.dataInfo.terminal.smartPowerStatus == 1
												? "开启"
												: "--"
											: "--"
									}}
								</el-descriptions-item>
							</el-descriptions>
						</div>
					</div>
					<div class="b_stateAndWaring" v-if="this.initBool == false && this.terminalState != 2">
						<el-descriptions title="发布状态及告警" :column="4" border>
							<el-descriptions-item label="发布历史" :contentStyle="{ color: '#333' }">
								<i class="el-icon-view viewClass" @click="handleView(10)"></i>
							</el-descriptions-item>
							<el-descriptions-item label="当前发布时间">{{
								this.dataInfo.publishContent != null ? this.dataInfo.publishContent.publishTime : ""
							}}</el-descriptions-item>
							<!-- <el-descriptions-item label="发布状态">{{ this.dataInfo.publishContent != null ? "已发布" : "" }}</el-descriptions-item> -->
							<el-descriptions-item label="SIM卡短信告警" :contentStyle="{ color: '#333' }">
								<i class="el-icon-view viewClass" @click="handleView(9)"></i>
							</el-descriptions-item>
							<!-- <el-descriptions-item label="情报板状态">{{ this.dataInfo.terminal.status == 0 ? "正常" : "异常" }}</el-descriptions-item> -->
						</el-descriptions>
					</div>
					<div class="b_approve" v-if="this.initBool == false && this.approveMore.length !== 0 && (this.terminalState === 0 || this.terminalState === 2)">
						<el-descriptions title="发布内容审批" direction="vertical" :column="3" border>
							<template v-for="(item, index) in approveMore">
								<template v-if="item.type == 1">
									<el-descriptions-item label="当前发布信息" :key="index" :labelStyle="{ width: '63%' }" :contentStyle="{ width: '63%' }">{{
										item.content
									}}</el-descriptions-item>
									<el-descriptions-item label="发布时间" :labelStyle="{ width: '12%' }" :contentStyle="{ width: '12%' }" :key="index">{{
										item.time
									}}</el-descriptions-item>
									<el-descriptions-item label="审批" :labelStyle="{ width: '25%' }" :contentStyle="{ width: '25%' }" :key="index">
										<el-button
											type="primary"
											size="small"
											:disabled="role_monitor == 1 && role_monitorApprove == 0"
											@click="approvePass(item.id)"
											>允许</el-button
										>
										<el-button
											type="danger"
											size="small"
											:disabled="role_monitor == 1 && role_monitorApprove == 0"
											@click="approveRefuse(item.id)"
											>拒绝</el-button
										>
										<!-- <span v-if="role_monitor == 1 && role_monitorApprove == 0" style="margin-left: 24px; color: #909399"
											>非白名单内容，需上级进行审批后重新发布</span
										> -->
										<el-tooltip
											v-if="role_monitor == 1 && role_monitorApprove == 0"
											class="item"
											effect="dark"
											content="非白名单内容，需上级进行审批后重新发布"
											placement="top"
										>
											<i class="el-icon-warning" style="font-size: 22px; margin-left: 24px; color: #909399"></i>
										</el-tooltip>
									</el-descriptions-item>
								</template>
								<template v-else>
									<el-descriptions-item label="当前发布信息" :key="index" :labelStyle="{'width': '63%'}" :contentStyle="{'width': '63%'}">
										<el-image style="width: 32px; height: 32px" fit="fill" :src="item.content" :preview-src-list="[item.content]">
											<div slot="error">
												<i class="wj-icon-24gl-pictureSplit"></i>
											</div>
										</el-image>
									</el-descriptions-item>
									<el-descriptions-item label="发布时间" :key="index" :labelStyle="{'width': '12%'}" :contentStyle="{'width': '12%'}">{{ item.time }}</el-descriptions-item>
									<el-descriptions-item label="审批" :key="index" :labelStyle="{'width': '25%'}" :contentStyle="{'width': '25%'}">
										<el-button
											type="primary"
											size="small"
											:disabled="role_monitor == 1 && role_monitorApprove == 0"
											@click="approveImgPass(item.id)"
											>允许</el-button
										>
										<el-button
											type="danger"
											size="small"
											:disabled="role_monitor == 1 && role_monitorApprove == 0"
											@click="approveImgRefuse(item.id)"
											>拒绝</el-button
										>
										<el-input
											style="width: 35%; margin-left: 24px"
											v-model="imgApproveName"
											:disabled="role_monitor == 1 && role_monitorApprove == 0"
											placeholder="请输入图片名称"
										></el-input>
										<!-- <span v-if="role_monitor == 1 && role_monitorApprove == 0" style="margin-left: 24px; color: #909399"
											>非白名单内容，需上级进行审批后重新发布</span
										> -->
										<el-tooltip v-if="role_monitor == 1 && role_monitorApprove == 0" class="item" effect="dark" content="非白名单内容，需上级进行审批后重新发布" placement="top">
											<i class="el-icon-warning" style="font-size: 22px;margin-left: 24px; color: #909399;"></i>
										</el-tooltip>
									</el-descriptions-item>
								</template>
							</template>
						</el-descriptions>
					</div>
					<div class="b_boards">
						<div class="b_boards_title">当前发布信息</div>
            <el-container>
              <el-main style="width: 50%">
                <el-dialog :modal="true" :visible.sync="dialogVisible">
                  <img :style="{ width: '100%', height: '64vh' }" :src="dialogImageUrl" alt="加载失败" />
                </el-dialog>
                <div class="b_boards_content"></div>
              </el-main>
<!--              <el-main style="width: 50%;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">-->
<!--                <el-image-->
<!--                    :src="captureImgUrl"-->
<!--                    :preview-src-list="previewSrcList"-->
<!--                    fit="cover" style="width: 100%;height: 100%">-->
<!--                  <div slot="error" class="">-->
<!--                    <el-empty description="暂未获取到情报板图片"></el-empty>-->
<!--                  </div>-->
<!--                </el-image>-->
<!--                <el-button style="margin-top: 10px" type="primary" @click="execCapture" :loading="execCaptureLoading">点击抓取最新图片</el-button>-->
<!--              </el-main>-->
            </el-container>
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
		<AlertBox :alertBoxVisible="alertBoxTabVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>{{ alertBoxTitle }}</p>
					<i class="wj-icon-guanbi" @click="alertBoxTabclose"></i>
				</div>
				<div class="contentBox_body" v-show="!curveChart">
					<div class="tabList">
						<div class="tabListTable">
							<el-table :data="tableDataAlertBox" style="width: 100%">
								<el-table-column type="index" width="80" label="序号"> </el-table-column>
								<el-table-column prop="warningTime" label="时间" width="280"> </el-table-column>
								<el-table-column v-if="this.histortType === 10" prop="approveName" label="审批人" width="100" />
								<el-table-column v-if="this.histortType === 10" prop="approveWay" label="审批方式" :formatter="wayFormat" width="100" />
								<el-table-column prop="content" label="状态/内容" show-overflow-tooltip>
									<template slot-scope="scope">
										<el-image
											v-if="scope.row.imagePateStr != null && scope.row.imagePateStr != undefined"
											style="width: 16px; height: 16px"
											fit="fill"
											:src="scope.row.imagePateStr"
											:preview-src-list="[scope.row.imagePateStr]"
										>
											<div slot="error">
												<i class="wj-icon-24gl-pictureSplit"></i>
											</div>
										</el-image>
										<span v-else>{{ scope.row.content }}</span>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
					<div class="tabPage">
						<el-pagination
							background
							@size-change="handleSizeChangeAlertBox"
							@current-change="handleCurrentChangeAlertBox"
							:current-page="currentPageAlertBox"
							:page-sizes="[5]"
							:page-size="pageSizeAlertBox"
							layout="total, prev, pager, next, jumper"
							:total="totalAlertBox"
						>
						</el-pagination>
					</div>
				</div>
				<div class="contentBox_body" v-show="curveChart">
					<div class="sub_time">
						<div class="sub_time_title">统计时间</div>
						<dir class="sub_time_widget">
							<el-date-picker
								v-model="dateValue"
								:picker-options="pickerOptions"
								format="yyyy-MM-dd"
								type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
								:clearable="false"
                @change="selectSubTimeValueEvent"
							>
							</el-date-picker>
						</dir>
					</div>
					<div id="chartBox" style="width: 1000px; height: 500px"></div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="alertBoxTabConfirm">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import { Notification } from "element-ui";
import Header from "@/views/common/Header";
import Footer from "@/views/common/Footer";
import TreeList2 from "@/views/common/TreeList2";
import {
  // control_terminalGroup,
  control_terminalGroup_delete,
  control_terminalGroup_add,
  control_terminalGroup_edit,
  monitoring_terminalGroup,
  monitoring_terminalInfo,
  monitoring_examineRefuse,
  monitoring_examinePass,
  monitor_every_history,
  monitor_cpu_status,
  monitor_sim,
  monitor_content,
  monitor_hum_history,
  get_map_base64,
  monitor_sim_status,
  monitor_voltage_number,
  monitoring_asideMessage,
  monitoring_examineImgRefuse,
  monitoring_examineImgPass,
  latest_board_img_query,
  exec_capture,
  camera_query,
} from "@/utils/request/api";
export default {
	name: "Monitoring",
	components: {
		Header,
		Footer,
		TreeList2,
	},
	data() {
		return {
      execCaptureLoading: false,
      captureImgUrl: "",
      imgFolderName: "",
      previewSrcList: [],
			// 局部刷新树形组件
			isShow: true,
			// 区分终端组0和关键字库组1的标题名字
			listType: 0,
			// 是否开启右击事件,默认开启(子组件内默认是true)
			isRightClick: false,
			treeData: [
				// {
				// 	id: 1,
				// 	groupName: "一级 1",
				// 	isEdit: false,
				// 	children: [
				// 		{
				// 			id: 4,
				// 			groupName: "二级 1-1",
				// 			isEdit: false,
				// 			children: [
				// 				{
				// 					id: 9,
				// 					groupName: "三级 1-1-1",
				// 					isEdit: false,
				// 				},
				// 				{
				// 					id: 10,
				// 					groupName: "三级 1-1-2",
				// 					isEdit: false,
				// 				},
				// 			],
				// 		},
				// 	],
				// },
				// {
				// 	id: 2,
				// 	groupName: "一级 2",
				// 	isEdit: false,
				// 	children: [
				// 		{
				// 			id: 5,
				// 			groupName: "二级 2-1",
				// 			isEdit: false,
				// 		},
				// 		{
				// 			id: 6,
				// 			groupName: "二级 2-2",
				// 			isEdit: false,
				// 		},
				// 	],
				// },
				// {
				// 	id: 3,
				// 	groupName: "一级 3",
				// 	isEdit: false,
				// 	children: [
				// 		{
				// 			id: 7,
				// 			groupName: "二级 3-1",
				// 			isEdit: false,
				// 		},
				// 		{
				// 			id: 8,
				// 			groupName: "二级 3-2",
				// 			isEdit: false,
				// 			children: [
				// 				{
				// 					id: 11,
				// 					groupName: "三级 3-2-1",
				// 					isEdit: false,
				// 				},
				// 				{
				// 					id: 12,
				// 					groupName: "三级 3-2-2",
				// 					isEdit: false,
				// 				},
				// 				{
				// 					id: 13,
				// 					groupName: "三级 3-2-3",
				// 					isEdit: false,
				// 				},
				// 			],
				// 		},
				// 	],
				// },
			],
			defaultPropsData: {
				children: "children",
				label: "groupName",
			},
			// 初始化显示地图 默认为true显示地图，false显示终端所有的信息和状态
			initBool: true,
			// 设备状态 0正常/1故障/2审批
			terminalState: undefined,
			// 设备终端信息
			dataInfo: {
				publishContent: {
					id: "",
					content: "",
					terminalId: "",
					terminalName: "",
					coord: "",
					publishTime: "",
					ipAddress: "",
					serial: "",
					internalNumber: "",
					eth0Mac: "",
					eth1Mac: "",
					vmbModel: "",
				},
				shortMessage: "",
				vmbType: {
					id: "",
					vmbTypeName: "",
				},
				terminal: {
					id: "",
					name: "",
					terminalType: 1,
					ipAddress: "",
					eth0Mac: "",
					eth1Mac: "",
					serial: "",
					coord: "",
					version: "",
					status: "",
					vmbModelId: "",
					createTime: "",
					groupId: "",
					type: "",
					cpu: "",
					memoryNow: "",
					memorySum: "",
					diskNow: "",
					diskSum: "",
					trafficMangle: "",
					trafficData: "",
					heartTime: "",
					internalNumber: "",
					person: "",
					contact: "",
					protocol: "",
					platformIp: "",
					clientIP: "",
					vpnGatewayIp: "",
					doorStatus: "",
					doorDistance: "",
					angleStatus: "",
					angle: "",
					tempture: "",
					temptureStatus: "",
					rh: "",
					rhStatus: "",
					direction: "",
					vmbNumber: "",
					organization: "",
					clientPhoneNumber: "",
					groupName: "",
					terminalTypeName: "",
					safetyTime: "",

					clientGateway: "",

					powerStatus: "",
					netWorkDown: "",
					netWorkUp: "",
					cpuTempture: "",
					cpuTempStatus: "",
					vpnStatus: "",
					simStatus: "",

					voltage: "",
					smartPowerStatus: "",
					uuid: "",
				},
				title: "",
				approves: {},
        cameraDevice: {
          id: 0,
          ip: "",
          accountName: "",
          password: "",
          port: 0,
          createTime: "",
          type: 0,
          timeLen: 0,
          interval: 0
        }
			},
			// 保存单次点击树形组件的终端数据（用来审批拒绝后的重新渲染）
			dataInfoShape: {},
			// 多条审批自定义数组
			approveMore: [],
			// 定时器
			timer: null,
			// 初始化地图板子
			InitMapBoard: [],

			// 自定义弹窗控制
			alertBoxTabVisible: false,
			// 自定义弹窗数据
			tableDataAlertBox: [],
			// 自定义弹窗标题
			alertBoxTitle: "",
			// 分页当前页码——自定义弹窗
			currentPageAlertBox: 1,
			// 总页码——自定义弹窗
			totalAlertBox: 0,
			// 每页条数——自定义弹窗
			pageSizeAlertBox: 5,
			// 分页初始化页码——自定义弹窗
			pageNumAlertBox: 1,
			// 温湿度曲线展示, 默认false自定义弹窗中展示表格，true展示曲线图表
			curveChart: false,
			// 箱体温度/湿度/前置装置运行温度的数据数组
			box_T: [],
			asideMessagegZero: 6,
			// selectTerminalInfoByIdTimer: null, // 定时器对象---（通过id获取终端信息）
			terminalInfoId: undefined, // 保存id---（通过id获取终端信息）
			dialogVisible: false, // 图片放大的dialog
			dialogImageUrl: "", // 大图的url
			imgApproveName: "", // 图片审批名名称
			role_monitor: undefined, // 监控组角色（0-1）
			role_monitorApprove: undefined, // 监控组管理员角色（1-1）
			sub_time_value: "", // 温度、湿度、电量历史统计中的时间控件
			pickerOptions: {
				disabledDate(time) {
					// 禁止选择未来的时间, 和一年之前的时间
          const now = Date.now();
          const lastYearNow = new Date();
          lastYearNow.setFullYear(lastYearNow.getFullYear() - 1);
					return time.getTime() > now || time.getTime() < lastYearNow;
				},
        shortcuts: [
            {
          text: '今天',
          onClick(picker) {
            const date = new Date();
            picker.$emit('pick', [date, date]);
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [date, date]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
			histortType: "", // 保存小眼睛历史的类型
      dateValue: [],
      temperatureSeries: [],
      temperatureXAxis: [],
      iconSvg: `
        <svg t="1730448812453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1591" width="40" height="40">
          <path d="M501.097 819.37l11.466 11.807 11.469-11.807c0.717-0.717 71.434-73.667 141.172-163.211 95.188-122.172 143.47-216.060 143.47-279.039 0-73.71-31.012-142.91-87.29-194.842-55.839-51.571-130.027-79.971-208.822-79.971-78.814 0-152.979 28.399-208.82 79.97-56.299 51.933-87.291 121.133-87.291 194.842 0 62.979 48.282 156.867 143.468 279.039 69.741 89.545 140.458 162.495 141.177 163.212zM512.561 277.126c56.38 0 102.268 46.546 102.268 103.743 0 57.235-45.888 103.78-102.268 103.78-56.377 0-102.266-46.546-102.266-103.78 0-57.197 45.889-103.743 102.266-103.743zM686.902 753.717l-25.627 25.607c16.793 10.81 26.722 22.895 26.722 34.543 0 32.986-76.142 69.837-178.068 69.837-101.927 0-178.069-36.852-178.069-69.837 0-12.724 11.548-25.967 31.33-37.534l-23.214-27.359c-27.142 17.628-43.077 39.965-43.077 64.853 0 60.028 91.557 105.298 213.030 105.298 121.472 0 213.009-45.231 213.009-105.298-0.038-22.656-13.162-43.278-36.035-60.109z" fill="#d81e06" p-id="1592"></path>
        </svg>`
		};
	},
	created() {},
	mounted() {
    let token = this.$route.query.token;
    if (token) {
      localStorage.setItem("token", token);
      localStorage.setItem("role_monitor", 1);
      localStorage.setItem("role_monitorApprove", 0);
    }
    this.setDefaultDateValue();
		// 获取角色（用来判断是监控组还是监控组管理员）
		this.role_monitor = localStorage.getItem("role_monitor");
		this.role_monitorApprove = localStorage.getItem("role_monitorApprove");
		// 获取base64格式的地图
		this.getMapBase64();
		// 请求终端分组树形
		this.getTreeListNodeData();
		this.counter();
		// 如果存在定时器，移除，否则设置
		if (this.timer) {
			clearInterval(this.timer);
		} else {
			this.timer = setInterval(() => {
				this.treeData = [];
				this.getTreeListNodeData();
				this.counter();
				this.getWarningAsideMessage();
        this.getCameraPicture(this.dataInfo.terminal.clientIP)
				if (this.terminalInfoId) {
					this.selectTerminalInfoById(this.terminalInfoId);
				}
			}, 7000);
		}
	},
	destroyed() {
		// 组件销毁时候，清空定时器
		clearInterval(this.timer);
		this.timer = null;
		// // 清空定时器---（通过id获取终端信息）
		// clearTimeout(this.selectTerminalInfoByIdTimer)
		// this.selectTerminalInfoByIdTimer = null
		// 清空所有侧边通知消息
		Notification.closeAll();
		// 关闭光电闪烁
		document.location.href = "lightwarning://0";
	},
	methods: {
    wayFormat(row, column, cellValue) {
      if (cellValue === 0) {
        return 'web';
      } else if (cellValue === 1) {
        return '短信';
      }
      // 如果 prop 的值不是 1 或 2，则返回空字符串
      return '';
    },
    setDefaultDateValue() {
      const date = new Date();
      this.dateValue = [date,date];
    },
		// 时间控件值的切换、
		selectSubTimeValueEvent(date) {
			if (this.histortType === 2) {
				this.alertBoxTitle = "箱体温度历史记录";
				this.alertBoxTabVisible = true;
				this.curveChart = true;
				this.box_T = [];
        this.temperatureXAxis = [];
        this.temperatureSeries = [];
				monitor_hum_history({
					serial: this.dataInfo.terminal.serial,
					type: 0,
          startDateStr: this.formattingFun(date[0]),
          endDateStr: this.formattingFun(date[1]),
				}).then((res) => {
          if (res.code === 200) {
            this.temperatureXAxis = res.data.xaxis;
            res.data.yaxis.forEach((i) => {
              this.temperatureSeries.push({
                  data: i,
                  type: "line",
                  smooth: true,
                  itemStyle: {
                    normal: {
                      label: {show: true},
                    },
                  }
              })
            })
          }
				});
				setTimeout(() => {
					this.initHumitureChart_T();
				}, 200);
			}
      else if (this.histortType === 3) {
				this.alertBoxTitle = "箱体湿度历史记录";
				this.alertBoxTabVisible = true;
				this.curveChart = true;
				this.box_T = [];
        this.temperatureXAxis = [];
        this.temperatureSeries = [];
				monitor_hum_history({
					serial: this.dataInfo.terminal.serial,
					type: 1,
          startDateStr: this.formattingFun(this.dateValue[0]),
          endDateStr: this.formattingFun(this.dateValue[1]),
				}).then((res) => {
					if (res.code === 200) {
            this.temperatureXAxis = res.data.xaxis;
            res.data.yaxis.forEach((i) => {
              this.temperatureSeries.push({
                data: i,
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    label: {show: true},
                  },
                }
              })
            })
					}
				});
				setTimeout(() => {
					this.initHumitureChart_H();
				}, 200);
			}
      else if (this.histortType === 7) {
				this.alertBoxTitle = "前置装置运行温度历史记录";
				this.alertBoxTabVisible = true;
				this.curveChart = true;
				this.box_T = [];
        this.temperatureXAxis = [];
        this.temperatureSeries = [];
				this.getNowTime();
				monitor_hum_history({
					serial: this.dataInfo.terminal.serial,
					type: 2,
          startDateStr: this.formattingFun(this.dateValue[0]),
          endDateStr: this.formattingFun(this.dateValue[1]),
				}).then((res) => {
					if (res.code === 200) {
            this.temperatureXAxis = res.data.xaxis;
            res.data.yaxis.forEach((i) => {
              this.temperatureSeries.push({
                data: i,
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    label: {show: true},
                  },
                }
              })
            })
					}
				});
				setTimeout(() => {
					this.initHumitureChart_CPU();
				}, 200);
			}
      else if (this.histortType == 11) {
				this.alertBoxTitle = "智能电源电压历史记录";
				this.alertBoxTabVisible = true;
				this.curveChart = true;
				this.box_T = [];
				monitor_voltage_number({
					serial: this.dataInfo.terminal.serial,
					targetDateStr: this.formattingFun(date),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.box_T = res.data;
					}
				});
				setTimeout(() => {
					this.initVoltageNumberChart();
				}, 200);
			}
		},
		// 格式化选中的时间
		formattingFun(value) {
			var date = new Date(value);
			var year = date.getFullYear();
			var month = (date.getMonth() + 1).toString().padStart(2, "0");
			var day = date.getDate().toString().padStart(2, "0");
			var formattedDate = `${year}-${month}-${day}`;
			return formattedDate;
		},
		// 获取当前时间
		getNowTime() {
			var now = new Date();
			var year = now.getFullYear(); //得到年份
			var month = now.getMonth(); //得到月份
			var date = now.getDate(); //得到日期
			month = month + 1;
			month = month.toString().padStart(2, "0");
			date = date.toString().padStart(2, "0");
			var defaultDate = `${year}-${month}-${date}`;
			this.sub_time_value = defaultDate;
		},
		// 全部关闭 点击事件
		okBtnHandleClick() {
			console.log("我被点击了...");
			Notification.closeAll();
		},
		// 绑定和移除（0/1）
		isBindAndRemove(key) {
			var okBtns_ = document.querySelectorAll(".my-notification .closeAllNotification");
			if (okBtns_.length > 0) {
				if (key == 0) {
					for (var i = 0; i < okBtns_.length; i++) {
						okBtns_[i].addEventListener("click", this.okBtnHandleClick);
					}
				} else {
					for (var j = 0; j < okBtns_.length; j++) {
						okBtns_[j].removeEventListener("click", this.okBtnHandleClick);
					}
				}
			}
		},
		// 关闭光电闪烁事件
		closeLightwarning() {
			document.location.href = "lightwarning://0";
		},
		// 告警消息——侧标提示
		getWarningAsideMessage() {
			this.isBindAndRemove(1);
			monitoring_asideMessage().then((res) => {
				console.log(res);
				if (res.code == 200) {
					// this.$msg.success("告警消息获取成功！");
					res.data.forEach((item) => {
						if (this.asideMessagegZero == 0) {
							if (item.subType == 15) {
								setTimeout(() => {
									Notification({
										title: item.internalNumber + "  ( " + item.terminalName + " )",
										dangerouslyUseHTMLString: true,
										message:
											"<div style='width:225px;'><div style='width:100%;display:flex;flex-direction: row;justify-content: center;align-items: center;'>" +
											"<img style='width:24px;height:24px;margin:6px;'" +
											"src=" +
											"https://" +
											window.location.host +
											"/images/" +
											item.imageName +
											" alt='加载失败' />" +
											"</div>" +
											"<div style='width:100%;text-align:left;line-height: 24px;'>" +
											item.warningTime +
											"</div><span class='closeAllNotification' style='display:inline-block;line-height: 24px;background:#E6A23C;color:#fff;padding: 1px 8px;float: right;'>全部关闭</span></div>",
										type: "warning",
										duration: 0,
										offset: 66,
										position: "top-right",
										customClass: "my-notification",
									});
									// 开启光电闪烁
									document.location.href = "lightwarning://1";
								}, 0);
							} else {
								setTimeout(() => {
									Notification({
										title: item.internalNumber + "  ( " + item.terminalName + " )",
										dangerouslyUseHTMLString: true,
										message:
											"<div style='width:225px;'><span style='display:inline-block;width:100%;text-align:left;line-height: 24px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'>" +
											this.contentFilter(item.content) +
											"</span>" +
											"<span style='display:inline-block;width:100%;text-align:left;line-height: 24px;'>" +
											item.warningTime +
											"</span><span class='closeAllNotification' style='display:inline-block;line-height: 24px;background:#E6A23C;color:#fff;padding: 1px 8px;float: right;'>全部关闭</span></div>",
										type: "warning",
										duration: 0,
										offset: 66,
										position: "top-right",
										customClass: "my-notification",
									});
									// 开启光电闪烁
									document.location.href = "lightwarning://1";
								}, 0);
							}
						} else {
							return;
						}
					});
					this.isBindAndRemove(0);
				} else {
					this.$msg.error("告警消息获取失败！");
				}
			});
		},
		counter() {
			var counterTimer = setInterval(() => {
				console.log(this.asideMessagegZero);
				if (this.asideMessagegZero === 0) {
					clearInterval(counterTimer);
				} else {
					this.asideMessagegZero--;
				}
			}, 1000);
		},
		// 获取地图base64
		getMapBase64() {
			get_map_base64().then((res) => {
				if (res.code == 200) {
					document.querySelector(".mapbg").style.backgroundImage = "url(" + "data:image/jpeg;base64," + res.data + ")";
				} else {
					this.$msg.error("地图获取失败！");
				}
			});
		},
		//局部刷新
		reload() {
			this.isShow = false;
			this.$nextTick(() => {
				this.isShow = true;
			});
		},
		// 树形组件节点点击事件
		treeListNodeClick(data) {
			// // 清空定时器---（通过id获取终端信息）
			// clearTimeout(this.selectTerminalInfoByIdTimer)
			// this.selectTerminalInfoByIdTimer = null
			console.log(data);
			console.log(data.children);
			this.dataInfoShape = data; // 保存终端信息，用来刷新同意或者拒绝后的数据
			if (data.children == undefined || data.children == null) {
				// 点击组的时候不显示详情数据
				this.initBool = false; // 显示终端所有的信息和状态
			} else {
				return;
			}
			this.terminalState = data.status; // 终端状态 0正常/1故障/2审批

			this.clearBoardNode(); // 清空板子

			if (data.serial) {
				this.terminalInfoId = data.id;
				this.selectTerminalInfoById(data.id);
			}
		},
		// 根据id查终端详情
		selectTerminalInfoById(id) {
			monitoring_terminalInfo({
				id: id,
			}).then((res) => {
				if (res.code === 200) {
					this.dataInfo = res.data;
					this.terminalState = res.data.terminal.status; // 终端状态 0正常/1故障/2审批
          camera_query({
            id: res.data.terminal.cameraId,
          }).then((res)=> {
            if (res.code === 200) {
              this.dataInfo.cameraDevice = res.data;
              console.log(this.dataInfo);
            }
          });
					this.clearBoardNode(); // 清空板子
					var construction = this.createBoard();
					var board = null;

          if (res.data.approves === null) {
            this.approveMore = [];
          } else {
            // 审批
            this.approveContent(res.data.approves);
            // res.data.approves.forEach((item) => {
            //   if (item.type === 1) {
            //     board = new construction();
            //     board.appendChildNode(this.calculateBoard(item.content, 1), 1);
            //   } else if (item.type === 2) {
            //     board = new construction();
            //     board.appendChildNode(this.calculateBoard("https://" + window.location.host + "/images/" + item.imageName, 2), 2);
            //   }
            // });
          }
					if (res.data.publishContent != null && res.data.publishContent != undefined && res.data.publishContent != "") {
						if (res.data.publishContent.type == 1) {
							// 字符
							console.log(res.data.publishContent.content); // Hello World-19/02550,老铁666-19/02550
							console.log(this.calculateBoard(res.data.publishContent.content, 1));
							board = new construction();
							board.appendChildNode(this.calculateBoard(res.data.publishContent.content, 1), 1);
						}
            else if (res.data.publishContent.type == 2) {
							// 图片
							board = new construction();
							board.appendChildNode(
								this.calculateBoard("https://" + window.location.host + "/images/" + res.data.publishContent.imageName, 2),
								2
							);
						}
					}
          else if (res.data.publishContent == null && (res.data.approves == undefined || res.data.approves == null)) {
						board = new construction();
						board.appendChildNode(this.calculateBoard("", 1), 1);
					}
					// // 定时刷新该方法（通过id获取终端信息）
					// this.selectTerminalInfoByIdTimer = setTimeout(() => {
					// 	this.selectTerminalInfoById(id)
					// },7000)
				}
			});
		},
    // 点击抓取最新图片
    async execCapture(){
      this.execCaptureLoading = true;
      exec_capture({
        id: this.dataInfo.terminal.id,
      }).then((res)=> {
        if (res.code !== 200) {
          this.$message.error(res.data);
          this.execCaptureLoading = false;
        }else{
          this.$message.success("正在抓取图片，请稍后查看");
        }
      }).catch(()=> {
        this.execCaptureLoading = false;
      })

      setTimeout(() => {
        this.execCaptureLoading = false;
      }, this.dataInfo.cameraDevice.timeLen * 1000);

      setTimeout(()=>{
        this.captureImgUrl = "";
        latest_board_img_query({
          messageBoardIp: this.dataInfo.terminal.clientIP
        }).then((res)=>{
          if (res.code === 200) {
            if (res.data.imgName === "") {
              let max = this.dataInfo.cameraDevice.timeLen / this.dataInfo.cameraDevice.interval;
              for (let i = 1; i <= max; i++) {
                setTimeout(()=> {
                  // this.captureImgUrl = "https://" + window.location.host + "/boardImg/" + this.imgFolderName + "/" + i + ".jpg";
                  // this.previewSrcList.push("https://192.164.10.90/boardImg/" + this.imgFolderName + "/" + i + ".jpg")
                  this.previewSrcList.push("https://" + window.location.host + "/boardImg/" + this.imgFolderName + "/" + i + ".jpg")
                  this.captureImgUrl = this.previewSrcList[this.previewSrcList.length - 1];
                }, i * this.dataInfo.cameraDevice.interval * 1000)
              }
            }
          }
        })
      }, 1000)
    },
    // 获取抓拍图片
    getCameraPicture(ip){
      if (ip === undefined || ip === "") {
        this.captureImgUrl = "";
        this.previewSrcList = [this.captureImgUrl];
        return;
      }
      latest_board_img_query({
        messageBoardIp: ip
      }).then(res => {
        if (res.code === 200) {
          if (res.data.imgName !== "") {
            this.captureImgUrl = "https://" + window.location.host + "/boardImg/gif/" + res.data.imgName;
            // this.captureImgUrl = "https://192.164.10.90/boardImg/gif/" + res.data.imgName;
          }
          this.imgFolderName = res.data.folderName;
        } else {
          this.captureImgUrl = "";
        }
      });
    },
		// 树形组件数据获取
		getTreeListNodeData() {
			monitoring_terminalGroup().then((res) => {
				console.log(res);
				if (res.code == 200) {
					// res.data.forEach((element) => {
					// 	this.treeData.push(element);
					// });
					this.recursionTreeList2(res.data).forEach((element) => {
						this.treeData.push(element);
					});
					this.InitMapBoard = [];
					this.recursionInitMapBoard(this.recursionTreeList2(res.data));
					this.reload(); // 局部刷新树形组件
				} else {
					this.$msg.error("终端分组获取失败！");
				}
			});
		},
		// 递归  treeList2组件  添加isEdit属性
		recursionTreeList2(list) {
			list.forEach((item) => {
				item.isEdit = false;

				if (item.children != undefined && item.children.length > 0) {
					this.recursionTreeList2(item.children);
				} else if (item.children == undefined) {
          item.groupName = item.internalNumber + " " + item.name;
				}
			});
			return list;
		},
		// 递归  初始化地图上的板子
		async recursionInitMapBoard(list) {
			list.forEach((item) => {
				if (item.children == undefined) {
					if (item.imageName) {
						item.imagePateStr = "https://" + window.location.host + "/images/" + item.imageName;
					}
					this.InitMapBoard.push(item);
				} else {
					this.recursionInitMapBoard(item.children);
				}
			});
		},
		// 终端组删除
		treeListNodeDelete(id) {
			// alert("删除");
			control_terminalGroup_delete({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.reload();
					this.$msg.success("删除终端组成功！");
					this.treeData = [];
					this.getTreeListNodeData();
					this.getAllTerminalGroup();
				} else if (res.code == 9002) {
					this.$msg.error("该组不为空，无法删除！");
				} else {
					this.$msg.error("删除终端组失败！");
				}
			});
		},
		// 终端组添加
		treeListNodeAdd(groupName, parentGroupId) {
			// alert("添加");
			control_terminalGroup_add({
				groupName: groupName,
				parentGroupId: parentGroupId,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.reload();
					this.$msg.success("终端组添加成功！");
					this.treeData = [];
					this.getTreeListNodeData();
					this.getAllTerminalGroup();
					console.log(this.treeData);
				} else {
					this.$msg.error("终端组添加失败！");
				}
			});
		},
		// 终端组编辑
		treeListNodeEdit(groupName, id) {
			// alert("编辑");
			control_terminalGroup_edit({
				id: id,
				groupName: groupName,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.reload();
					this.$msg.success("终端组编辑成功！");
					this.treeData = [];
					this.getTreeListNodeData();
					this.getAllTerminalGroup();
					console.log(this.treeData);
				} else {
					this.$msg.error("终端组编辑失败！");
				}
			});
		},
		// 构造板子
		createBoard() {
			var that = this;
			return function construction() {
				this.appendChildNode = (arr, type) => {
					for (var i = 0; i < arr.length; i++) {
						var div = document.createElement("div");
						div.setAttribute(
							"style",
							"white-space: pre-line;width: 100%;min-height:57px;border-radius: 4px;box-sizing: border-box;padding: 18px 12px;margin: 12px 12px 0;background:black;text-align:center;font-size: 18px;color:" +
								arr[i].color
						);
						if (type == 1) {
              div.innerText = arr[i].content.replace(/\\r\\n|\\n/g, '\n');
						} else if (type == 2) {
							var imgUrl = arr[i].content;
							var img = new Image();
							img.src = arr[i].content;
							img.alt = "加载失败";
							img.style = "width: 48px; height: 48px; cursor: pointer;";
							img.onclick = () => {
								that.dialogImageUrl = imgUrl;
								that.dialogVisible = true;
							};
							div.appendChild(img);
						}
						document.querySelector(".b_boards_content").appendChild(div);
					}
				};
			};
		},
		// 删除所有板子
		clearBoardNode() {
			document.querySelectorAll(".b_boards_content>div").forEach((item) => {
				document.querySelector(".b_boards_content").removeChild(item);
			});
		},
		// 计算板子内容和字体颜色
		calculateBoard(str, type) {
			var arrCur = [];
			if (type == 1) {
				var arrContent = str.split(",");
				arrContent.forEach((item) => {
					arrCur.push({
						content: item.split("/")[0] == "" ? "暂无数据" : item.split("/")[0],
						color:
							item.split("/")[1] == "255000000000" // 红色
								? "rgba(255,0,0)"
								: item.split("/")[1] == "255255000000" // 黄色
								? "rgba(255,255,0)"
								: item.split("/")[1] == "000255000000" // 绿色
								? "rgba(0,255,0)"
								: "rgba(255,255,255)", // 白色
					});
				});
			} else if (type == 2) {
				var arrImagePateStr = [];
				arrImagePateStr.push(str);
				arrImagePateStr.forEach((item) => {
					arrCur.push({
						content: item,
					});
				});
			}
			return arrCur;
		},
		// 多条审批
		approveContent(arr) {
			if (arr != null && arr != undefined) {
				this.approveMore = [];
				arr.forEach((item) => {
					var obj = {};
					if (item.type == 1) {
						// 字符审批
						obj = {
							content: "",
							time: item.createTime,
							id: item.id,
							type: item.type,
						};
						item.content.split(",").forEach((el) => {
							obj.content += el.split("/")[0] + "--";
						});
						obj.content = obj.content.slice(0, obj.content.length - 2);
						this.approveMore.push(obj);
					} else if (item.type == 2) {
						// 图片审批
						obj = {
							content: "https://" + window.location.host + "/images/" + item.imageName,
							time: item.createTime,
							id: item.id,
							type: item.type,
						};
						this.approveMore.push(obj);
					}
				});
			} else {
				this.approveMore = [];
			}
		},
		// 审批拒绝字符
		approveRefuse(id) {
			monitoring_examineRefuse({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.treeData = []; // 将树形组件数据清空
					this.getTreeListNodeData(); // 重新加载树形组件数据
					this.reload(); // 局部刷新树形组件
					this.dataInfoShape.status = 0;
					this.treeListNodeClick(this.dataInfoShape); // 将保存的树形组件终端数据通过方法treeListNodeClick重新渲染
          this.approveMore = this.approveMore.filter(item => item.id !== id);

					this.$msg.success("审批拒绝成功！");
				} else {
					this.$msg.error("审批拒绝失败！");
				}
			});
		},
		// 审批通过字符
		approvePass(id) {
			monitoring_examinePass({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.treeData = []; // 将树形组件数据清空
					this.getTreeListNodeData(); // 重新加载树形组件数据
					this.reload(); // 局部刷新树形组件
					this.dataInfoShape.status = 0;
					console.log(this.dataInfoShape);
					this.treeListNodeClick(this.dataInfoShape); // 将保存的树形组件终端数据通过方法treeListNodeClick重新渲染
					this.$msg.success("审批通过成功！");
				} else {
					this.$msg.error("审批通过失败！");
				}
			});
		},
		// 审批拒绝图片
		approveImgRefuse(id) {
			monitoring_examineImgRefuse({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.treeData = []; // 将树形组件数据清空
					this.getTreeListNodeData(); // 重新加载树形组件数据
					this.reload(); // 局部刷新树形组件
					console.log(this.dataInfoShape);
					this.dataInfoShape.status = 0;
					this.treeListNodeClick(this.dataInfoShape); // 将保存的树形组件终端数据通过方法treeListNodeClick重新渲染

					this.$msg.success("审批拒绝成功！");
				} else {
					this.$msg.error("审批拒绝失败！");
				}
			});
		},
		// 审批通过图片
		approveImgPass(id) {
			if (this.imgApproveName != "") {
				monitoring_examineImgPass({
					id: id,
					name: this.imgApproveName,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.treeData = []; // 将树形组件数据清空
						this.getTreeListNodeData(); // 重新加载树形组件数据
						this.reload(); // 局部刷新树形组件
						this.dataInfoShape.status = 0;
						console.log(this.dataInfoShape);
						this.treeListNodeClick(this.dataInfoShape); // 将保存的树形组件终端数据通过方法treeListNodeClick重新渲染
						this.imgApproveName = ""; // 将名称输入框清空
						this.$msg.success("审批通过成功！");
					} else {
						this.$msg.error("审批通过失败！");
					}
				});
			} else {
				this.$msg.warning("请输入图片名称！");
			}
		},
		// 返回地图
		backMapClick() {
			this.initBool = true;
		},
		// 地图上板子的点击事件
		mapBoardClick(item) {
			this.treeListNodeClick(item);
		},
		// 地图上板子的内容格式化
		mapBoardContent(str) {
			var endStr = "";
			var arrContent = str.split(",");
			arrContent.forEach((item) => {
				endStr += item.split("/")[0] + ",";
			});
			return endStr.slice(0, endStr.length - 1);
		},
		// 小眼睛 历史记录
		handleView(type) {
			this.histortType = type;
      this.setDefaultDateValue();
			switch (type) {
				case 0:
					this.alertBoxTitle = "箱门状态历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.everyHistory(1);
					break;
				case 1:
					this.alertBoxTitle = "箱体电源状态历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.everyHistory(10);
					break;
				case 2:
					this.alertBoxTitle = "箱体温度历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = true;
					this.box_T = [];
					this.getNowTime();
          this.temperatureSeries = [];
					monitor_hum_history({
            serial: this.dataInfo.terminal.serial,
            type: 0,
            startDateStr: this.formattingFun(this.dateValue[0]),
            endDateStr: this.formattingFun(this.dateValue[1]),
					}).then((res) => {
            if (res.code === 200) {
              this.temperatureXAxis = res.data.xaxis;
              res.data.yaxis.forEach((i) => {
                this.temperatureSeries.push({
                  data: i,
                  type: "line",
                  smooth: true,
                  itemStyle: {
                    normal: {
                      label: {show: true},
                    },
                  }
                })
              })
            }
					});
					setTimeout(() => {
						this.initHumitureChart_T();
					}, 200);

					break;
				case 3:
					this.alertBoxTitle = "箱体湿度历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = true;
					this.box_T = [];
					this.getNowTime();
          this.temperatureSeries = [];
					monitor_hum_history({
						serial: this.dataInfo.terminal.serial,
						type: 1,
            startDateStr: this.formattingFun(this.dateValue[0]),
            endDateStr: this.formattingFun(this.dateValue[1]),
					}).then((res) => {
						if (res.code === 200) {
              this.temperatureXAxis = res.data.xaxis;
              res.data.yaxis.forEach((i) => {
                this.temperatureSeries.push({
                  data: i,
                  type: "line",
                  smooth: true,
                  itemStyle: {
                    normal: {
                      label: {show: true},
                    },
                  }
                })
              })
						}
					});
					setTimeout(() => {
						this.initHumitureChart_H();
					}, 200);
					break;
				case 4:
					this.alertBoxTitle = "控制器状态历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.everyHistory(13);
					break;
				case 5:
					this.alertBoxTitle = "上联网络状态历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.everyHistory(12);
					break;
				case 6:
					this.alertBoxTitle = "前置装置状态历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.cupStatus();
					break;
				case 7:
					this.alertBoxTitle = "前置装置运行温度历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = true;
					this.box_T = [];
					this.getNowTime();
          this.temperatureSeries = [];
					monitor_hum_history({
						serial: this.dataInfo.terminal.serial,
						type: 2,
            startDateStr: this.formattingFun(this.dateValue[0]),
            endDateStr: this.formattingFun(this.dateValue[1]),
					}).then((res) => {
						if (res.code === 200) {
              this.temperatureXAxis = res.data.xaxis;
              res.data.yaxis.forEach((i) => {
                this.temperatureSeries.push({
                  data: i,
                  type: "line",
                  smooth: true,
                  itemStyle: {
                    normal: {
                      label: {show: true},
                    },
                  }
                })
              })
						}
					});
					setTimeout(() => {
						this.initHumitureChart_CPU();
					}, 200);
					break;
				case 8:
					this.alertBoxTitle = "VPN链路状态历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.everyHistory(11);
					break;
				case 9:
					this.alertBoxTitle = "SIM卡短信告警历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.simHistory();
					break;
				case 10:
					this.alertBoxTitle = "发布内容历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.contentHistory();
					break;
				case 11:
					this.alertBoxTitle = "智能电源电压历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = true;
					this.box_T = [];
					this.getNowTime();
          this.temperatureSeries = [];
					monitor_voltage_number({
						serial: this.dataInfo.terminal.serial,
						targetDateStr: this.sub_time_value,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.box_T = res.data;
						}
					});
					setTimeout(() => {
						this.initVoltageNumberChart();
					}, 200);
					break;
				case 12:
					this.alertBoxTitle = "智能电源开关状态历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					break;
				case 13:
					this.alertBoxTitle = "SIM卡状态历史记录";
					this.alertBoxTabVisible = true;
					this.curveChart = false;
					this.simStatusHistory();
					break;
			}
		},
		// 各个历史记录请求
		everyHistory(type) {
			this.currentPageAlertBox = 1;
			this.totalAlertBox = 0;
			this.pageSizeAlertBox = 5;
			this.pageNumAlertBox = 1;
			monitor_every_history({
				page: this.pageNumAlertBox,
				size: this.pageSizeAlertBox,
				keyword: "",
				terminalId: this.dataInfo.terminal.id,
				subType: type,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBox = res.data.result;
					this.totalAlertBox = res.data.total;
				} else {
					this.$msg.error("历史记录获取失败！");
				}
			});
		},
		// 前置装置状态
		cupStatus() {
			this.currentPageAlertBox = 1;
			this.totalAlertBox = 0;
			this.pageSizeAlertBox = 5;
			this.pageNumAlertBox = 1;
			monitor_cpu_status({
				page: this.pageNumAlertBox,
				size: this.pageSizeAlertBox,
				keyword: "",
				terminalId: this.dataInfo.terminal.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBox = res.data.result;
					this.totalAlertBox = res.data.total;
				} else {
					this.$msg.error("历史记录获取失败！");
				}
			});
		},
		// 箱体温度图表
		initHumitureChart_T() {
			var chartDom = document.getElementById("chartBox");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					title: {
						text: "箱体温度",
						padding: 25,
					},
					xAxis: {
						type: "category",
						axisLabel: {
							show: true,
							interval: "0",
							rotate: -60,
							margin: 10,
							color: "#303133",
							fontStyle: "normal",
							fontWeight: "normal",
							fontSize: "14",
							align: "left",
							verticalAlign: "middle",
						},
            data: this.temperatureXAxis
					},
					yAxis: {
						type: "value",
						axisLabel: {
							color: "#303133",
							fontStyle: "normal",
							fontWeight: "normal",
							fontSize: "14",
							formatter: "{value} °C",
						},
						axisLine: {
							show: true,
						},
						splitLine: {
							show: false,
						},
					},
					grid: {
						left: 80,
						top: 80,
						right: 80,
						bottom: 140,
					},
					series: this.temperatureSeries
				};
        myChart.clear();
				myChart.setOption(option);
			}
		},
		// 箱体湿度图表
		initHumitureChart_H() {
			var chartDom = document.getElementById("chartBox");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					title: {
						text: "箱体湿度",
						padding: 25,
					},
					xAxis: {
						type: "category",
						// boundaryGap: false,
						axisLabel: {
							show: true,
							interval: "0",
							rotate: -60,
							margin: 10,
							color: "#303133",
							fontStyle: "normal",
							fontWeight: "normal",
							fontSize: "14",
							align: "left",
							verticalAlign: "middle",
						},
            data: this.temperatureXAxis,
					},
					yAxis: {
						type: "value",
						min: 0,
						axisLabel: {
							color: "#303133",
							fontStyle: "normal",
							fontWeight: "normal",
							fontSize: "14",
							formatter: "{value} %",
						},
						axisLine: {
							show: true,
						},
						splitLine: {
							show: false,
						},
					},
					grid: {
						left: 80,
						top: 80,
						right: 80,
						bottom: 140,
					},
          series: this.temperatureSeries,
				};
        myChart.clear();
				myChart.setOption(option);
			}
		},
		// 前置装置运行温度图表
		initHumitureChart_CPU() {
			var chartDom = document.getElementById("chartBox");
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					title: {
						text: "前置装置运行温度",
						padding: 25,
					},
					xAxis: {
						type: "category",
						// boundaryGap: false,
						axisLabel: {
							show: true,
							interval: "0",
							rotate: -60,
							margin: 10,
							color: "#303133",
							fontStyle: "normal",
							fontWeight: "normal",
							fontSize: "14",
							align: "left",
							verticalAlign: "middle",
						},
            data: this.temperatureXAxis,
					},
					yAxis: {
						type: "value",
						axisLabel: {
							color: "#303133",
							fontStyle: "normal",
							fontWeight: "normal",
							fontSize: "14",
							formatter: "{value} °C",
						},
						axisLine: {
							show: true,
						},
						splitLine: {
							show: false,
						},
					},
					grid: {
						left: 80,
						top: 80,
						right: 80,
						bottom: 140,
					},
          series: this.temperatureSeries,
				};
        myChart.clear();
				myChart.setOption(option);
			}
		},
		// 断网告警历史记录（SIM卡短信告警历史记录）
		simHistory() {
			this.currentPageAlertBox = 1;
			this.totalAlertBox = 0;
			this.pageSizeAlertBox = 5;
			this.pageNumAlertBox = 1;
			monitor_sim({
				page: this.pageNumAlertBox,
				size: this.pageSizeAlertBox,
				terminalId: this.dataInfo.terminal.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBox = res.data.result;
					this.totalAlertBox = res.data.total;
				} else {
					this.$msg.error("历史记录获取失败！");
				}
			});
		},
		// 发布内容历史记录过滤内容（去掉颜色数值代码）
		contentFilter(value) {
			let contentStr = "";
			value.split(",").forEach((item) => {
				contentStr += item.split("/")[0] + ",";
			});
			return contentStr.slice(0, -1);
		},
		// 发布内容历史记录
		contentHistory() {
			this.currentPageAlertBox = 1;
			this.totalAlertBox = 0;
			this.pageSizeAlertBox = 5;
			this.pageNumAlertBox = 1;
			monitor_content({
				page: this.pageNumAlertBox,
				size: this.pageSizeAlertBox,
				terminalId: this.dataInfo.terminal.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						item.warningTime = item.publishTime;
						if (item.imageName) {
							item.imagePateStr = "https://" + window.location.host + "/images/" + item.imageName;
						} else {
							item.content = this.contentFilter(item.content);
						}
					});
					this.tableDataAlertBox = res.data.result;
					this.totalAlertBox = res.data.total;
				} else {
					this.$msg.error("历史记录获取失败！");
				}
			});
		},
		// SIM卡状态历史记录
		simStatusHistory() {
			this.currentPageAlertBox = 1;
			this.totalAlertBox = 0;
			this.pageSizeAlertBox = 5;
			this.pageNumAlertBox = 1;
			monitor_sim_status({
				page: this.pageNumAlertBox,
				size: this.pageSizeAlertBox,
				serial: this.dataInfo.terminal.serial,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						item.warningTime = item.createTime;
					});
					this.tableDataAlertBox = res.data.result;
					this.totalAlertBox = res.data.total;
				} else {
					this.$msg.error("历史记录获取失败！");
				}
			});
		},
		// 智能电源电压图表
		initVoltageNumberChart() {
			var chartDom = document.getElementById("chartBox");
			console.log(chartDom);
			if (chartDom) {
				var myChart = this.$echarts.init(chartDom);
				var option = {
					title: {
						text: "智能电源电压历史记录",
						padding: 25,
					},
					xAxis: {
						type: "category",
						// boundaryGap: false,
						axisLabel: {
							show: true,
							interval: "0",
							rotate: -60,
							margin: 10,
							color: "#303133",
							fontStyle: "normal",
							fontWeight: "normal",
							fontSize: "14",
							align: "left",
							verticalAlign: "middle",
						},
					},
					yAxis: {
						type: "value",
						max: 500,
						min: 0,
						axisLabel: {
							color: "#303133",
							fontStyle: "normal",
							fontWeight: "normal",
							fontSize: "14",
							formatter: "{value} V",
						},
						axisLine: {
							show: true,
						},
						splitLine: {
							show: false,
						},
					},
					grid: {
						left: 80,
						top: 80,
						right: 80,
						bottom: 140,
					},
					series: [
						{
							data: this.box_T,
							type: "line",
							// areaStyle: {},
							smooth: true,
							itemStyle: {
								normal: {
									label: { show: true },
								},
							},
						},
					],
				};

				option && myChart.setOption(option);
			}
		},
		// alertBox 关闭
		alertBoxTabclose() {
			this.alertBoxTabVisible = false;
		},
		// alertBox 确定
		alertBoxTabConfirm() {
			this.alertBoxTabVisible = false;
		},
		// 分页组件事件
		handleSizeChangeAlertBox(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChangeAlertBox(val) {
			console.log(`当前页: ${val}`);
			switch (this.alertBoxTitle) {
				case "箱门状态历史记录":
					monitor_every_history({
						page: val,
						size: this.pageSizeAlertBox,
						keyword: "",
						terminalId: this.dataInfo.terminal.id,
						subType: 1,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
				case "箱体电源状态历史记录":
					monitor_every_history({
						page: val,
						size: this.pageSizeAlertBox,
						keyword: "",
						terminalId: this.dataInfo.terminal.id,
						subType: 10,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
				case "控制器状态历史记录":
					monitor_every_history({
						page: val,
						size: this.pageSizeAlertBox,
						keyword: "",
						terminalId: this.dataInfo.terminal.id,
						subType: 13,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
				case "上联网络状态历史记录":
					monitor_every_history({
						page: val,
						size: this.pageSizeAlertBox,
						keyword: "",
						terminalId: this.dataInfo.terminal.id,
						subType: 12,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
				case "前置装置状态历史记录":
					monitor_cpu_status({
						page: val,
						size: this.pageSizeAlertBox,
						keyword: "",
						terminalId: this.dataInfo.terminal.id,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
				case "VPN链路状态历史记录":
					monitor_every_history({
						page: val,
						size: this.pageSizeAlertBox,
						keyword: "",
						terminalId: this.dataInfo.terminal.id,
						subType: 11,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
				case "SIM卡短信告警历史记录":
					monitor_sim({
						page: val,
						size: this.pageSizeAlertBox,
						terminalId: this.dataInfo.terminal.id,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
				case "发布内容历史记录":
					monitor_content({
						page: val,
						size: this.pageSizeAlertBox,
						terminalId: this.dataInfo.terminal.id,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							res.data.result.forEach((item) => {
								item.warningTime = item.publishTime;
								if (item.imageName) {
									item.imagePateStr = "https://" + window.location.host + "/images/" + item.imageName;
								} else {
									item.content = this.contentFilter(item.content);
								}
							});
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
				case "智能电源开关状态历史记录":
					console.log("智能电源开关状态历史记录");
					break;
				case "SIM卡状态历史记录":
					monitor_sim_status({
						page: val,
						size: this.pageSizeAlertBox,
						serial: this.dataInfo.terminal.serial,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							res.data.result.forEach((item) => {
								item.warningTime = item.createTime;
							});
							this.tableDataAlertBox = res.data.result;
							this.totalAlertBox = res.data.total;
						} else {
							this.$msg.error("历史记录获取失败！");
						}
					});
					break;
			}
		},
	},
};
</script>
<style lang="less" scoped>
.monitoringContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.middleContent {
		width: 100%;
		height: calc(100% - 68px - 68px);
		box-sizing: border-box;
		padding: 2px 0 0;
		background: #f2f2f2;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.treeContent {
			width: 14%;
			height: 100%;
			overflow: hidden;
		}
		.mainContent {
			width: calc(86% - 2px);
			height: 100%;
			margin-left: 2px;
			background: #fff;
			overflow: hidden;
			.mainContentScroll {
				width: 101%;
				height: 100%;
				overflow-y: scroll;
			}
			.backMap {
				width: auto;
				height: 42px;
				margin: 16px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
			}
			.b_title {
				width: auto;
				height: 52px;
				line-height: 52px;
				margin: 16px 16px 32px;
				box-sizing: border-box;
				font-size: 18px;
				font-weight: 500;
				text-align: center;
				background: #f2f3f3;
			}
			.b_info {
				width: calc(100% - 64px);
				box-sizing: border-box;
				margin: 0 32px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				.b_baseInfo {
					width: 48%;
				}
				.b_state {
					width: 48%;
					.viewClass {
						margin-left: 12px;
						cursor: pointer;
					}
				}
			}

			.b_stateAndWaring {
				width: calc(100% - 64px);
				box-sizing: border-box;
				margin: 32px 32px 0;
				.viewClass {
					margin-left: 12px;
					cursor: pointer;
				}
			}
			.b_approve {
				width: calc(100% - 64px);
				box-sizing: border-box;
				margin: 32px 32px 0;
			}
			.b_boards {
				width: calc(100% - 64px);
				margin: 32px 32px 0;
				box-sizing: border-box;
				.b_boards_title {
					height: 48px;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 12px 10px;
					box-sizing: border-box;
					text-align: center;
					line-height: 1.5;
					background: #f2f3f3;
				}
				.b_boards_content {
					width: 100%;
					/* height: 150px; */
					/* background: grey; */
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					/*
					border-left: 1px solid #ECEFF5;
					border-right: 1px solid #ECEFF5;
					border-bottom: 1px solid #ECEFF5;
					*/
				}
			}
			/deep/ .el-descriptions__header {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 12px 10px;
				box-sizing: border-box;
				text-align: center;
				line-height: 1.5;
				background: #f2f3f3;
				margin-bottom: 0;
			}
			/deep/ .el-descriptions-item__label.is-bordered-label {
				background: #fff;
				color: #333;
			}
			/deep/ .el-descriptions-item__content {
				color: #409eff;
			}
			/deep/ .el-descriptions__title {
				font-weight: 400;
			}
		}
		.mainContentMap {
			.mapbg {
				width: 1649px;
				height: 809px;
				/*background-image: url("../../../assets/icon/monitorBg.png");*/
				background-size: 1649px 809px;
				background-position: center center;
				background-repeat: no-repeat;
				position: relative;
				.mapBoard {
					background: #000000;
					position: absolute;
					top: 700px;
					left: 140px;
					text-align: center;
					font-size: 18px;
					overflow: hidden;
				}
				.spancontent {
					padding: 12px 18px;
					display: inline-block;
					white-space: nowrap;
					animation: 10s wordsLoop linear infinite normal;
				}
				.mapBoard_success {
					color: rgba(0, 255, 0);
				}
				.mapBoard_Danger {
					color: rgba(255, 0, 0);
				}
				.mapBoard_approve {
					color: rgba(255, 255, 0);
				}
				@keyframes wordsLoop {
					0% {
						transform: translateX(200px);
						-webkit-transform: translateX(200px);
					}

					100% {
						transform: translateX(-100%);
						-webkit-transform: translateX(-100%);
					}
				}

				@-webkit-keyframes wordsLoop {
					0% {
						transform: translateX(200px);
						-webkit-transform: translateX(200px);
					}

					100% {
						transform: translateX(-100%);
						-webkit-transform: translateX(-100%);
					}
				}
			}
		}
	}
}
</style>
